<template>
  <div class="my-profile" v-if="isMyProfileItemVisible">
    <el-dialog :visible.sync="isMyProfileItemVisible" width="500px" :before-close="handleClose">
      <el-form :model="myProfile" ref="myProfile" :label-width="isEditMyProfile? '20%' : '40%'" size="mini">
        <div v-if="!isEditMyProfile" class="my-profile-avatar">
          <Avatar :src="currentUserProfile.avatar" type="C2C" />
        </div>
        <el-form-item label="头像：" v-if="isEditMyProfile">
          <el-input placeholder="请输入图片地址" v-model="myProfile.avatar" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="ID：">
          <span>{{ currentUserProfile.userID }}</span>
        </el-form-item>
        <el-form-item label="昵称：">
          <span v-if="!isEditMyProfile">{{ currentUserProfile.nick }}</span>
          <el-input v-if="isEditMyProfile" v-model="myProfile.nick" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <span v-if="!isEditMyProfile">{{ showGender }}</span>
          <el-radio-group v-if="isEditMyProfile" v-model="myProfile.gender">
            <el-radio :label="TIM.TYPES.GENDER_MALE">男</el-radio>
            <el-radio :label="TIM.TYPES.GENDER_FEMALE">女</el-radio>
            <el-radio :label="TIM.TYPES.GENDER_UNKNOWN">不明</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日：">
          <span v-if="!isEditMyProfile">{{ showBirthday || '未设置' }}</span>
          <el-date-picker
            v-model="myProfile.birthday"
            v-if="isEditMyProfile"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyyMMdd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="验证方式：">
          <span v-if="!isEditMyProfile">{{ allowTypeMap[currentUserProfile.allowType] }}</span>
          <el-radio-group v-if="isEditMyProfile" v-model="myProfile.allowType">
            <el-radio :label="TIM.TYPES.ALLOW_TYPE_NEED_CONFIRM">需要验证信息</el-radio>
            <el-radio :label="TIM.TYPES.ALLOW_TYPE_ALLOW_ANY">允许任何人</el-radio>
            <el-radio :label="TIM.TYPES.ALLOW_TYPE_DENY_ANY">不允许添加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名：">
          <span v-if="!isEditMyProfile">{{ currentUserProfile.selfSignature || '无' }}</span>
          <el-input v-if="isEditMyProfile" v-model="myProfile.selfSignature" type="textarea" rows="3" maxlength="150" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div class="my-profile-footer">
        <el-button v-if="!isEditMyProfile" @click="editMyProfile" type="primary">修改资料</el-button>
        <el-button v-if="isEditMyProfile" @click="updateMyProfile" type="primary">确认修改</el-button>
        <el-button v-if="isEditMyProfile" @click="cancelEditMyProfile">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data(){
    return {
      isEditMyProfile: false,
      myProfile:{
        avatar: '',
        nick: '',
        gender: '',
        birthday: '0',
        selfSignature:'',
        allowType:''
      },
      allowTypeMap:{
        AllowType_Type_NeedConfirm: '需要验证信息',
        AllowType_Type_AllowAny: '允许直接加为好友',
        AllowType_Type_DenyAny: '不允许添加'
      }
    }
  },
  computed:{
    ...mapState({
      isMyProfileItemVisible: state => state.user.isMyProfileItemVisible,
      currentUserProfile: state => state.user.currentUserProfile
    }),
    showGender(){
      switch(this.currentUserProfile.gender){
        case this.TIM.TYPES.GENDER_MALE:
          return '♂';
        case this.TIM.TYPES.GENDER_FEMALE:
          return '♀';
        default: 
          return '不明';
      }
    },
    showBirthday(){
      // 日期格式为 20200101 => 2020年01月01日
      const myBirthday = this.currentUserProfile.birthday.toString();
      let dateRule = /^(\d{4})(\d{2})(\d{2})$/;
      if(dateRule.test(myBirthday)){
        return myBirthday.slice(0,4) + '年'+ myBirthday.slice(4,6) + '月' + myBirthday.slice(6,8) + '日';
      }
      return false;
    }
  },
  methods:{
    handleClose(){
      this.isEditMyProfile = false;
      this.$store.commit('toggleIsMyProfileItemVisible',false);
    },
    editMyProfile(){
      this.isEditMyProfile = true;
      this.reset();
    },
    updateMyProfile(){
      this.myProfile.birthday = Number(this.myProfile.birthday);
      let isChange = false;
      for(let key in this.myProfile){
        if(this.myProfile[key] !== this.currentUserProfile[key]){
          isChange = true;
          break;
        }
      }
      if(isChange){
        this.$store.dispatch('updateMyProfile', this.myProfile);
      }
      this.isEditMyProfile = false;
    },
    cancelEditMyProfile(){
      this.isEditMyProfile = false;
    },
    reset(){
      Object.assign(this, {
        myProfile:{
          avatar: this.currentUserProfile.avatar,
          nick: this.currentUserProfile.nick,
          gender: this.currentUserProfile.gender || this.TIM.TYPES.GENDER_UNKNOWN,
          birthday: this.currentUserProfile.birthday === 0 ? '' : this.currentUserProfile.birthday.toString(),
          messageSettings: this.currentUserProfile.messageSettings,
          selfSignature: this.currentUserProfile.selfSignature,
          allowType: this.currentUserProfile.allowType
        }
      });
    }
  }
}
</script>

<style scoped>
.my-profile-avatar{
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding-bottom: 10px;
}
.my-profile-footer{
  margin-top: 20px;
  text-align: center;
}
.my-profile .el-form-item{
  margin-bottom: 5px;
}
</style>